<template>
  <div class="bb" @click="click" @mouseenter="show=true" @mouseleave="show=false">
    <span :class="['a','a1',x===0?'top':'',x===14?'bottom':'']"></span>
    <span :class="['a' ,'a4',y===14?'right':'',y===0?'left':'']"></span>
    <div v-show="show&&item===0&&isAble" class="kuang"></div>
    <img v-if="item===1" :src="black" alt class>
    <img v-if="item===2" :src="white" alt>
  </div>
</template>

<script>
import white from "../assets/white.png";
import black from "../assets/black.png";
export default {
  data() {
    return {
      show: false,
      black,
      white
    };
  },
  props: ["x", "y", "item", "isAble"],
  mounted() {},
  methods: {
    click() {
      if (this.item !== 0) return;
      this.$emit("a", this.x, this.y, true);
    }
  }
};
</script>
<style lang="scss" scoped>
@keyframes mo {
  from {
    transform: translate(-50%, -50%) scale(0);
  }
  to {
    transform: translate(-50%, -50%) scale(1);
  }
}
img {
  animation: mo 0.3s;
}
.a {
  width: 1px;
  height: 30px;
  display: inline-block;
}
.a1 {
  background: #777777;
  position: absolute;
  top: 0;
  left: 14.5px;
}
.a4 {
  background: #777777;
  position: absolute;
  width: 30px;
  height: 1px;
  top: 14.5px;
  left: 0px;
}
.bb {
  position: relative;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  cursor: pointer;
}
* {
  box-sizing: border-box;
  padding: 0;
}
.kuang {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border: 1px solid red;
  border-radius: 50%;
}
.top {
  height: 15px;
  top: 15px;
}
.bottom {
  height: 15px;
  bottom: 15px;
}
.right {
  width: 15px !important;
}
.left {
  width: 15px !important;
  left: 15px;
}
img {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

